// import * as XLSX from 'xlsx';
import { Button, Input, Modal, Radio, Select, Space, Table } from 'antd';
import { useState } from 'react'
import moment from 'moment';
import classes from './index.module.scss';
import { Key_Btns, Key_Map, columns } from '../contant';


export const KeyAdmin = () => {
  const user = '管理员1';
  const [lockId, setLockId] = useState(12345678);
  const [departId, setDepartId] = useState(12345678);
  const [password, setPassword] = useState(123456);
  const [isModalOpen, setIsModalOpen] = useState(false);
  const [isModal2Open, setIsModal2Open] = useState(false);
  const [logs, setLogs] = useState([
    {
      key: '1',
      operator: user,
      operation: '修改配置',
      time: '2023-01-01 10:00:00',
      result: '成功'
    },
    {
      key: '2',
      operator: user,
      operation: '删除用户',
      time: '2023-01-01 11:00:00',
      result: '成功'
    },
    // ...更多日志
  ]);
  const handleClick = (item: any) => {
    console.log('handleClick', item);
    // item.click({tim});   
    setLogs([...logs,
    {
      key: `${logs.length + 1}`,
      operator: user,
      time: moment(new Date()).format('YYYY-MM-DD hh:mm:ss'),
      operation: `${item.name}`,
      // result: item.click()
    }])
    console.log('handleClick', logs);

    // setLockId(lockId.concat(`操作：${item.name} . ${moment(new Date()).format('YYYY-MM-DD hh:mm:ss')}`)) 
    // console.log(lockId);
    // Modal.error({ title: '错误', content: '串口连接失败' });
  }
  const handlePasswordClick = () => {
    // Modal.useModal()
    setIsModalOpen(true);

  }
  const handleOk = (item: any) => {
    setIsModalOpen(false);
    setIsModal2Open(false);
    // handleClick(item);
  };

  const handleCancel = () => {
    setIsModalOpen(false);
    setIsModal2Open(false);

  };



  const exportToCSV = () => {
    let csvContent = "data:text/csv;charset=utf-8,";
    const headers = columns.map(column => column.title).join(',') + '\r\n';
    csvContent += headers;

    logs.forEach(logEntry => {
      const row = columns.map(column => logEntry[column.dataIndex]).join(',');
      csvContent += row + '\r\n';
    });

    const encodedUri = encodeURI(csvContent);
    const link = document.createElement('a');
    link.setAttribute('href', encodedUri);
    link.setAttribute('download', 'logs.csv');
    document.body.appendChild(link); // Required for FF

    link.click(); // This will download the CSV file
  };

  const BtnModule = (param: { item: any }) => {
    const { item } = param;
    return <Button className={classes['btn-com-collect']} type='primary' onClick={() => handleClick(item)}>
      {item.name}
    </Button>
  }

  return <>
    <div className={classes["container-key"]}>
      <Button onClick={() => {
        setIsModal2Open(true)
        handleClick({name: "查看锁芯版本",click: () => { }})
      }} type='primary'>查看锁芯版本</Button>
      {/* <Modal
        title="修改密码"
        okText="确认修改"
        cancelText="取消"
        open={isModalOpen}
        onOk={() => handleOk({ name: "修改密码", click: () => "成功" })}
        onCancel={handleCancel}>
        <Input.Password value={password} style={{ width: '200px' }} onChange={(e) => setPassword(e.target.value)}/>
      </Modal> */}
      <Modal
        title="查看锁芯版本"
        okText="确认"
        cancelText="取消"
        open={isModal2Open}
        onOk={() => handleOk({ name: "查看锁芯版本", click: () => "成功" })}
        onCancel={handleCancel}>
        锁芯版本为1.0.0
      </Modal>
      {/* <Input value={password} addonBefore={'用户密码'} style={{ width: '200px' }} type='password'
          onChange={(e) => setPassword(e.target.value)} /> */}
      <div className={classes.line}>
        <Input.Password value={password} addonBefore={'用户密码'} style={{ width: '200px' }}  visibilityToggle={{visible: true}} />
        {/* <Button onClick={handlePasswordClick} type='primary'>重置密码</Button> */}
        <BtnModule item={Key_Map[Key_Btns.Button2]} />
      </div>
      <div className={classes.line}>
        <Input.Password value={lockId} addonBefore={'锁芯Id'} style={{ width: '200px' }}   visibilityToggle={{visible: true}} />
        <BtnModule item={Key_Map[Key_Btns.Button4]} />
      </div>
      <div className={classes.line}>
        <Input.Password value={departId} addonBefore={'部门Id'} style={{ width: '200px' }}   visibilityToggle={{visible: true}} />
        <BtnModule item={Key_Map[Key_Btns.Button5]} />
        {/* <Button onClick={setDepartId} type='primary'>重置部门Id</Button> */}
      </div>
    </div>
    <div className={classes.logModule}>
      <div>
        <Button onClick={exportToCSV} type="primary" style={{ marginBottom: 16 }}>
          导出到Excel
        </Button>
        <Table dataSource={logs} columns={columns} />
      </div>
    </div>
  </>

}